<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>注册</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/login.css" />
	<style type="text/css">
		.login_tips{text-align: center;font-size: 15px;}
		.login_tips a{color: #fbaf2e;}
		.login_tips a:active{color: #fbaf2e;}
		.cs_yan{position: relative;}
		.cs_yan span{position: absolute;color: #fff;background-color: #ffb02c;right: 0;top: 6px;padding: 8px 15px;border-radius: 18px;}
		.cs_disable{background-color: #9d9d9d !important;}
	</style>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="/js/public.js"></script>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav jjs-header">
		<h2 class="mui-title">注册</h2>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left"></a>
		<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
	</header>
	<div class="mui-content">
		<div class="jjs-logo"></div>
		<form class="mui-input-group login-form">
			<div class="mui-input-row phone-input cs_phone">
				<input type="text" placeholder="请输入邮箱/手机号">
				<i></i>
			</div>
			<div class="mui-input-row phone-input cs_yan">
				<input type="text" placeholder="请输入验证码">
				<span onclick="getcode()">获取验证码</span>
			</div>
			<div class="mui-input-row pwd-input">
				<input type="password" placeholder="请输入密码">
				<i></i>
			</div>
			<button type="button" class="mui-btn mui-btn-block login-btn" onclick="login()">立即登录</button>
		</form>
		
	    <div class="choose-login">
	    	<p class="login_tips">已有账户，<a href="login">请登录</a></p>
	    </div>
	</div>
	<script>
		var regrealphone = /^1[3|4|5|7|8][0-9]{9}$/;//手机号码
		function login(){
			var phoneVal = $(".cs_phone input").val()
			var pwdVal = $(".pwd-input input").val();
			
			if(phoneVal == ''){
				return mui.alert('','请输入邮箱/手机号')
			}
			else if(!regrealphone.test(phoneVal)){
			 	return	mui.alert('','您输入的的手机号码有误！');
			}
			else if(phoneVal != '' && pwdVal == ''){
				return mui.alert('','请输入密码')
			}
			
			$.ajax({
				url:'login',
				dataType:'json',
				type:'post',
				data:{},
				success:function (ret)  {
					if(ret.status=='success'){
						mui.toast("登录成功！")
						location.href="index"
					}
				},
				error:function  (err) {
					console.log(err)
					mui.alert("登录失败！")
				}
			})
		}
		
//		获取验证码
		function   getcode(){
			if($('.cs_yan span').hasClass('cs_disable')){
				return mui.toast('请稍后再试~');
			}
			var phone = $(".cs_phone input").val();
			if(!regrealphone.test(phone)){
			 	return	mui.alert('','您输入的的手机号码有误！');
			}
			$.ajax({
				url:'',
				dataType:'json',
				type:'post',
				data:{phone:phone},
				success:function  (ret) {
					if(true){
						mui.toast('验证码发送成功！，有效期xxxxx');
						var nums = 6;
						var timer1 = setInterval(function  () {
							nums--;
							if(nums<1){
								$('.cs_yan span').removeClass('cs_disable');
								$('.cs_yan span').text('获取验证码');
								clearInterval(timer1);
								return false;
							}
							$('.cs_yan span').addClass('cs_disable');
							$('.cs_yan span').text(nums+'秒后再试')
						},1000)
					}else{
						mui.toast('验证码发送失败！');
					}
				},
				error:function(err){
					console.log(err);
					
				}
			})
		}
	</script>
</body>
</html>